<template>
    <div id="app">
        <router-view />
    </div>
</template>
<script>
import { getToken } from '@/utils/auth'
import { menu } from '@/utils/menu'
export default {
    name: 'App',
    created() {
        if (localStorage.getItem("store")) {
            this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(localStorage.getItem("store"))))
        }
        //在页面刷新时将vuex里的信息保存到sessionStorage里
        window.addEventListener("beforeunload", () => {
            localStorage.setItem("store", JSON.stringify(this.$store.state))
            sessionStorage.setItem('routePath',this.$route.fullPath)
        })
        // this.getMenu()
    },
    methods:{
        async getMenu(){
            if(getToken()){
                let arr = JSON.parse(localStorage.getItem('menu'))
                let list = menu(this.$router.asyncRoutes, arr);
                this.$router.addRoutes(list)
                this.$router.options.routes = [...this.$router.constantRoutes,...list];
                this.$router.go(-1);
                this.$router.push({path:sessionStorage.getItem('routePath')})
            }
        }
    }
    // watch: {
    //     $route(path) {
    //         console.log(path)
    //         if (path.fullPath == '/404') {
    //             path.fullPath = '/index/index'
    //         }
    //     }
    // }
}
</script>
<style lang="scss">
.content_shb {
    width: calc(100% - 60px);
    min-height: calc(100vh - 150px);
    margin: 30px;
    padding: 30px;
    background-color: #fff;
    border-radius: 30px;
}
.el-radio__inner{
    width: 20px;
    height: 20px;
}
/*每个页面公共css */
.flex {
    display: flex;
}

.wrap {
    flex-wrap: wrap;
}

.nowrap {
    flex-wrap: nowrap;
}

.abso {
    position: absolute;
}

.rela {
    position: relative;
}

.fixed {
    position: fixed;
}

.content {
    /* min-height: 100%; */
}

.yj10 {
    border-radius: 10px;
}

.yj20 {
    border-radius: 20px;
}

.yj50 {
    border-radius: 50px;
}

.nodata {
    height: 100%;
}

/*布局 */
.column {
    flex-direction: column;
}

.row {
    flex-direction: row;
}

/*主轴方向对齐*/
.jc-s {
    justify-content: flex-start;
}

.jc-c {
    justify-content: center;
}

.jc-e {
    justify-content: flex-end;
}

.jc-sb {
    justify-content: space-between;
}

.jc-sa {
    justify-content: space-around;
}

/*交叉轴方向对齐*/
.ac-s {
    align-content: flex-start;
}

.ac-c {
    align-content: center;
}

.ac-e {
    align-content: flex-end;
}

.ac-sb {
    align-content: space-between;
}

.ac-sa {
    align-content: space-around;
}

.ai-s {
    align-items: flex-start;
}

.ai-c {
    align-items: center;
}

.ai-e {
    align-items: flex-end;
}

.ai-st {
    align-items: stretch;
}

/*字体颜色 */
.fc-lg {
    color: #b2b2b2;
}

.fc-g {
    color: #888888;
}

.fc-se {
    color: #353535;
}
.fc-ac {
    color: #5555ff;
}
.fc-b {
    color: black;
}

.fc-w {
    color: #ffffff;
}

.fc-l {
    color: #576b95;
}

.fc-s {
    color: #09bb07;
}

.fc-e {
    color: #e64340;
}

.fc-m {
    color: #ffbf27;
}

.fc-ws {
    color: #f5f5f5;
}

/* 字间距 */
.ls-1 {
    letter-spacing: 1px;
}

.ls-2 {
    letter-spacing: 2px;
}

.ls-3 {
    letter-spacing: 3px;
}

.ls-4 {
    letter-spacing: 4px;
}

.ls-5 {
    letter-spacing: 5px;
}

/*背景色 */
.bc-lg {
    background-color: #b2b2b2;
}

.bc-g {
    background-color: #888888;
}

.bc-se {
    background-color: #353535;
}

.bc-b {
    background-color: black;
}

.bc-w {
    background-color: #ffffff;
}

.bc-l {
    background-color: #576b95;
}

.bc-s {
    background-color: #09bb07;
}

.bc-e {
    background-color: #e64340;
}

.bc-m {
    background-color: #ffbf27;
}

.bc-ws {
    background-color: #f5f5f5;
}

/*字体相关 */
.fz-1 {
    font-size: 11px;
}

.fz-2 {
    font-size: 13px;
}

.fz-3 {
    font-size: 15px;
}

.fz-4 {
    font-size: 18px;
}

.fz-5 {
    font-size: 21px;
}

.fz-6 {
    font-size: 25px;
}

.fz-7 {
    font-size: 40px;
}

.fb {
    font-weight: bold;
}

.tl-d {
    text-decoration: line-through;
}

.tl-u {
    text-decoration: underline;
}

/*内边距 */
.p-1 {
    padding: 8px;
}

.pt-1 {
    padding-top: 8px;
}

.pr-1 {
    padding-right: 8px;
}

.pb-1 {
    padding-bottom: 8px;
}

.pl-1 {
    padding-left: 8px;
}

.p-2 {
    padding: 26px;
}

.pt-2 {
    padding-top: 26px;
}

.pr-2 {
    padding-right: 26px;
}

.pb-2 {
    padding-bottom: 26px;
}

.pl-2 {
    padding-left: 26px;
}

.p-3 {
    padding: 36px;
}

.pt-3 {
    padding-top: 36px;
}

.pr-3 {
    padding-right: 36px;
}

.pb-3 {
    padding-bottom: 36px;
}

.pl-3 {
    padding-left: 36px;
}

/*外边距 */
.m-1 {
    margin: 8px;
}

.mt-1 {
    margin-top: 8px;
}

.mr-1 {
    margin-right: 8px;
}

.mb-1 {
    margin-bottom: 8px;
}

.ml-1 {
    margin-left: 8px;
}

.m-2 {
    margin: 26px;
}

.mt-2 {
    margin-top: 26px;
}

.mr-2 {
    margin-right: 26px;
}

.mb-2 {
    margin-bottom: 26px;
}

.ml-2 {
    margin-left: 26px;
}

.m-3 {
    margin: 36px;
}

.mt-3 {
    margin-top: 36px;
}

.mr-3 {
    margin-right: 36px;
}

.mb-3 {
    margin-bottom: 36px;
}

.ml-3 {
    margin-left: 36px;
}

/*宽度*/
.wd-1 {
    width: 10%;
}

.wd-2 {
    width: 20%;
}

.wd-3 {
    width: 30%;
}

.wd-4 {
    width: 40%;
}

.wd-5 {
    width: 50%;
}

.wd-6 {
    width: 60%;
}

.wd-7 {
    width: 70%;
}

.wd-8 {
    width: 80%;
}

.wd-9 {
    width: 90%;
}

.wd-10 {
    width: 100% !important;
}

/* 高度 */
.h-1 {
    height: 10vh;
}

.h-2 {
    height: 20vh;
}

.h-3 {
    height: 30vh;
}

.h-4 {
    height: 40vh;
}

.h-5 {
    height: 50vh;
}

.h-6 {
    height: 60vh;
}

.h-7 {
    height: 70vh;
}

.h-8 {
    height: 80vh;
}

.h-9 {
    height: 90vh;
}

.h-10 {
    height: 100vh;
}

/* 弹性宽度 */
.fl-1 {
    flex: 0.1;
}

.fl-2 {
    flex: 0.2;
}

.fl-3 {
    flex: 0.3;
}

.fl-4 {
    flex: 0.4;
}

.fl-5 {
    flex: 0.5;
}

.fl-6 {
    flex: 0.6;
}

.fl-7 {
    flex: 0.7;
}

.fl-8 {
    flex: 0.8;
}

.fl-9 {
    flex: 0.9;
}

.fl-10 {
    flex: 1;
}

/*边框*/
.border {
    border: 1px solid #dddddd;
}

.border-t {
    border-top: 1px solid #dddddd;
}

.border-l {
    border-left: 1px solid #dddddd;
}

.border-r {
    border-right: 1px solid #dddddd;
}

.border-b {
    border-bottom: 1px solid #dddddd;
}

.border-c-lg {
    border-color: #b2b2b2;
}

.border-c-g {
    border-color: #888888;
}

.border-c-se {
    border-color: #353535;
}

.border-c-b {
    border-color: black;
}

.border-c-w {
    border-color: #ffffff;
}

.border-c-l {
    border-color: #576b95;
}

.border-c-s {
    border-color: #09bb07;
}

.border-c-e {
    border-color: #e64340;
}

.border-c-m {
    border-color: #ffbf27;
}

.border-c-ws {
    border-color: #f5f5f5;
}

/*字*/
.ta-l {
    text-align: left;
}

.ta-c {
    text-align: center;
}

.ta-r {
    text-align: right;
}

/*圆角*/
.fillet {
    border-radius: 10px;
}

.capsule {
    border-radius: 50px;
}

.circle {
    border-radius: 50%;
}

/*定位*/
.fixed {
    position: fixed;
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.sticky {
    position: sticky;
}

/*定位*/
.l-0 {
    left: 0px;
}

.l-10 {
    left: 10px;
}

.l-20 {
    left: 20px;
}

.l-30 {
    left: 30px;
}

.l-40 {
    left: 40px;
}

.r-0 {
    right: 0px;
}

.r-10 {
    right: 10px;
}

.r-20 {
    right: 20px;
}

.r-30 {
    right: 30px;
}

.r-40 {
    right: 40px;
}

.t-0 {
    top: 0px;
}

.t-10 {
    top: 10px;
}

.t-20 {
    top: 20px;
}

.t-30 {
    top: 30px;
}

.t-40 {
    top: 40px;
}

.b-0 {
    bottom: 0px;
}

.b-10 {
    bottom: 10px;
}

.b-20 {
    bottom: 20px;
}

.b-30 {
    bottom: 30px;
}

.b-40 {
    bottom: 40px;
}

/* 层级 */
.zi-1 {
    z-index: 9;
}

.zi-2 {
    z-index: 99;
}

.zi-3 {
    z-index: 999;
}

.zi-4 {
    z-index: 9999;
}

.zi-5 {
    z-index: 99999;
}

.zi-6 {
    z-index: 999999;
}

.zi-7 {
    z-index: 9999999;
}

.zi-8 {
    z-index: 99999999;
}

.zi-9 {
    z-index: 999999999;
}

/* 暂无数据 */
.nodata {
    width: 200px;
    height: 200px;
}

.overHide {
    overflow: hidden;
}
input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    appearance: none!important;
    margin: 0!important;
}
/* 火狐 */
 input{
    -moz-appearance:textfield !important;
}
</style>
